import React, { useState } from "react";

const Indentaion = () => {
  const [textareaValue, setTextareaValue] = useState("");

  const handleKeyDown = event => {
    if (event.key === "Tab") {
      event.preventDefault();

      const { selectionStart, selectionEnd } = event.target;
      const indent = "\t";

      const updatedValue =
        textareaValue.substring(0, selectionStart) +
        indent +
        textareaValue.substring(selectionEnd);

      setTextareaValue(updatedValue);

      // 将光标位置移动到缩进后的位置
      event.target.selectionStart = event.target.selectionEnd = selectionStart + indent.length;
    }
  };

  return (
    <textarea
      value={textareaValue}
      onChange={event => setTextareaValue(event.target.value)}
      onKeyDown={handleKeyDown}
      id="myTextarea" 
    cols="114" 
    rows="15"
    />
  );
};

export default Indentaion;